/**
 * 多选模式下，显示已选中的账号信息
 */
import { CloseCircleFilled } from '@ant-design/icons'
import type { OrderedSet } from 'immutable'
import  defaultAvatar  from '@/desktop/assets/avatar.jpg'
import type { BaseAccount } from '@/services/auth'

import './MultiChoosed.module.less'

export default function MultiChoosed(props: {
  choosed: OrderedSet<string>
  setChoosed: (choosed: OrderedSet<string>) => void
  accountMap: Map<string, BaseAccount>
}) {
  const { choosed, setChoosed, accountMap } = props

  const choosedAccounts = choosed
    .map(id => accountMap.get(id))
    .filter((item): item is BaseAccount => !!item)

  function remove(id: string) {
    setChoosed(choosed.delete(id))
  }

  return <div styleName="wrap">
    <header>
      {choosed.size ? (
        <div>
          已选择了<span>{choosed.size}</span>个账号
        </div>
      ) : (
        '请选择需要添加的账号'
      )}
    </header>

    <div styleName="accounts">
      {choosedAccounts.map(account => <AccountItem
        key={account.id}
        account={account}
        onRemove={() => remove(account.id)}
      />)}
    </div>
  </div>
}

function AccountItem(props: { account: BaseAccount; onRemove: () => void }) {
  const { account, onRemove } = props

  return <div styleName="account">
    <img src={account.avatar || defaultAvatar} />
    <span styleName="name">{account.name}</span>
    <CloseCircleFilled onClick={onRemove} />
  </div>
}
